<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="oobb">1</li>
        <li class="item">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let li = document.querySelectorAll('li')
        console.log(li);
        // className 可以获取和设置类名
        li[0].className = 'oobb item1'

        console.log(li[1].className);
        // 第二种方式
        // add 添加类名不会影响其他类名
        li[0].classList.add('box')
        // remove 移除类名不会影响其他类名
        li[0].classList.remove('box')
        // toggle 切换类名 ，如果有就移除 如果没有就添加
        li[0].classList.toggle('box')
        // 检测有没有对应类名 true/false
        console.log(li[0].classList.contains('box'));
        
    </script>
</body>
</html>